import React, { useEffect, useState } from 'react'
import Header from '../components/Header'
import Breadcrumb from '../components/Breadcrumb'
import { base, newsDetail } from '../service'
import Footer from '../components/Footer'
import { useSearchParams } from 'react-router-dom'
import { date } from '../util'

export default function NewsDetails() {
  const pathList = [
    { pid: 10, title: '首页', href: '/' },
    { pid: 15, title: '新闻中心', href: '/news' },
    { pid: 18, title: '新闻详情', href: '/news_details' },
  ]
  let [params]=useSearchParams()
  let [news,setNews]=useState({})
  console.log('----',params);
  //生命周期方法 —— 组件挂载时
  useEffect(()=>{
    (async()=>{
      let nid=params.get('nid')
      // 1.读取上个页面传递来的路由参数,新闻编号(nid)
      // 2.根据新闻编号查询服务端接口,获得新闻详情
      let data = await newsDetail(nid)
      // 对服务器端返回的数据进行预处理
      // 把Src="https://wwww.codebo.com/mfresh"
      data.content=data.content.replace(/src="/g,`src="${base}`)
      console.log(data)
      setNews(data)
    })()
  },[])
  return (
    <>
      {/* F1:页头 */}
      <Header></Header>
      {/* F2:面包屑 */}
      <Breadcrumb list={pathList}></Breadcrumb>
      {/* F3:主体 */}
      <div className="main container">
        <div className="news_details">
        <h2>{news.title}</h2>
        <span>发布时间：{date(news.pubTime)}</span>
        <div className='news_content' dangerouslySetInnerHTML={{__html:news.content}}></div>
    </div>
</div>

      {/* F4:页尾 */}
      <Footer></Footer>
    </>
  )
}
